<!--
 @description 定制二级页面
 @fileName index.vue
 @author zengqiongying
 @created 2021/09/28 17:30:08
-->
<template>
  <div class="main-page">
    <div class="wrapper">
      <div
        class="main-title"
        @click.stop="
          openInstrusction('produces', 'customizedProduction')
        "
      >
        <div style="flex:1;display:flex;align-items: center;">
          定制分厂产量(套)
          <img
            class="icon_inst"
            src="@/assets/image/icon_instructions.png"
          >
        </div>
        <div class="core-time" @click.stop="showCalendar = true">
          <span>{{ coreDateShow }}</span>
          <svg-icon icon-class="xia" />
        </div>
      </div>
      <factory-bar-chart
        :select-date="coreDate"
        bar-width="12px"
        :label-text-style="{
          fontSize: '8px',
        }"
        :axis-label-font-size="8"
        @get-factory="getFactoryHandle"
      />
    </div>
    <div class="wrapper">
      <div
        class="main-title"
        @click.stop="openInstrusction('produces', 'customized30day')"
      >
        <div style="flex:1;display:flex;align-items: center;">
          {{ factoryName }}近30日产量趋势(套)
          <img
            class="icon_inst"
            src="@/assets/image/icon_instructions.png"
          >
        </div>
        <div class="ft12 color-99 fw-normal">{{ coreDate }}</div>
      </div>
      <month-chart
        :select-date="coreDate"
        :factory-name="factoryName"
        @get-complete-date="getCompleteDateHandle"
      />
    </div>
    <div class="wrapper">
      <div class="main-title">
        <div
          style="flex:1;display:flex;align-items: center;"
          @click.stop="
            openInstrusction(
              'produces',
              'customizedProductLineRate'
            )
          "
        >
          {{ factoryName }}产线产量占比
          <img
            class="icon_inst"
            src="@/assets/image/icon_instructions.png"
          >
        </div>
        <div class="ft12 color-99 fw-normal">{{ completeDate }}</div>
      </div>
      <line-rate-chart
        :select-date="completeDate"
        :factory-name="factoryName"
      />
    </div>

    <van-calendar
      v-model="showCalendar"
      class="custom-calendar"
      color="#12B9A3"
      :row-height="40"
      :min-date="calendarMinDate"
      :max-date="calendarMaxDate"
      @confirm="onConfirmCalendar"
    />
  </div>
</template>

<script>
import CoreDateMixin from '@/mixins/CoreDate'
import FactoryBarChart from './components/FactoryBarChart'
import MonthChart from './components/MonthChart'
import LineRateChart from './components/LineRateChart'
import { parseTime } from '@/utils'
export default {
  name: 'CustomizedDetail',
  components: { FactoryBarChart, MonthChart, LineRateChart },
  filters: {},
  mixins: [CoreDateMixin],
  data() {
    return {
      factoryName: '',
      completeDate: ''
    }
  },

  computed: {},

  created() {
    if (this.$route.query.date) {
      this.coreDate = parseTime(this.$route.query.date, '{y}-{m}-{d}')
    }
  },
  activated() {},

  mounted() {},

  methods: {
    getFactoryHandle(name) {
      this.factoryName = name
    },
    getCompleteDateHandle(date) {
      this.completeDate = date
    }
  }
}
</script>
<style lang="less" scoped></style>
